<template>
	<view class="home">
		<view class="line-height-80">
			<view class="padding-lr-30 flex align-center justify-between">
				<view class="text-28 text-33">购物车商品</view>
				<view class="flex align-center" @click="getdel()">
					<view class="text-28">删除</view>
					<image src="/static/board/del.png" mode="" class="delimg"></image>
				</view>
			</view>
		</view>
		<view class="margin-top-status-bar-80-20">
			<!-- 购物车有数据，有效产品或无效产品 -->
			<view v-if="effectiveProductList.length">
				<!-- 购物车产品列表 -->
				<jc-mall-cartProduct :cart-effective="effectiveProductList" @choose="choose" @clear="clear"
					@change="change">
				</jc-mall-cartProduct>
			</view>
		</view>
		<view class="footbg flex align-center justify-between padding-lr-30">
			<view class="flex align-center">
				<text class="text-40" :class="isAllChoose ? 'tyIcon-round-check text-1a' : 'tyIcon-round text-cc'"
					@click="chooseAll"></text>
				<view class="margin-left-5 line-40 text-28">全选</view>
			</view>
			<view class="margin-left-15">
				<view class="text-30">合计： <text class="text-red">¥{{choosePrice}}</text> </view>
			</view>
			<view class="width-220 line-height-75 bg-1a text-center text-ff" style="border-radius: 38rpx;"
				@click="confirm">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				effectiveProductList: [],
				choosePrice: "0.00",
				isAllChoose: false
			}
		},
		onReady() {
			this.listCartProduct()
		},
		methods: {
			listCartProduct() {
				this.rq.getData('Memproducts/cart_list').then(res => {
					this.effectiveProductList = res.data
					this.effectiveProductList.forEach((item, index) => {
						item.is_select = 0
					})
				})
			},
			chooseAll() {
				let isSelect = this.isAllChoose ? 0 : 1
				if (isSelect == 0) {
					this.effectiveProductList.forEach((item, index) => {
						item.is_select = 0
					})
				} else {
					this.effectiveProductList.forEach((item, index) => {
						item.is_select = 1
					})
				}
				this.effectiveProductList = JSON.parse(JSON.stringify(this.effectiveProductList))
				this.loadBottom()
			},
			loadBottom() {
				let chooseNumber = 0,
					choosePrice = 0,
					isAllChoose = true

				this.effectiveProductList.forEach(value => {
					if (value.is_select == 1) {
						chooseNumber += value.num
						choosePrice += value.memproduct.price * value.num
					} else {
						isAllChoose = false
					}
				})

				this.chooseNumber = chooseNumber
				this.choosePrice = parseFloat(choosePrice).toFixed(2)
				this.isAllChoose = isAllChoose
			},
			choose(e) {
				console.log(e)
				this.effectiveProductList.forEach((item, index) => {
					if (e.index == index) {
						item.is_select = item.is_select == 1 ? 0 : 1
					}
				})
				this.effectiveProductList = JSON.parse(JSON.stringify(this.effectiveProductList))
				console.log(this.effectiveProductList)
				this.loadBottom()
			},
			change(e) {
				console.log(e)
				let index = e.identifier
				let number = e.number
				if (e.type == 3) {
					if (e.number <= 1) {
						this.cn.toast('数量不能再少了哦~')
						number = 1
					} else {
						number = e.number
					}
					this.effectiveProductList[index].num = e.number
				} else if (e.type == 2) {
					if (e.number <= 1) {
						this.cn.toast('数量不能再少了哦~')
						return false
					}
					this.effectiveProductList[index].num = e.number - 1
				} else if (e.type == 1) {
					this.effectiveProductList[index].num = e.number + 1
				}
				this.rq.getData('Products/save_cart', {
					id: this.effectiveProductList[index].id,
					num: this.effectiveProductList[index].num
				}).then(res => {
					if (res.code == 0) {
						this.effectiveProductList = res.data.effective_product_list

						//重新加载底部栏
						this.loadBottom()
					} else {
						//加载购物车商品
						this.listCartProduct()
					}
				})
			},
			getdel() {
				if (!this.chooseNumber) {
					this.cn.toast('请选择商品');
					return false
				}
				let filteredItems = this.effectiveProductList.filter(item => item.is_select == 1); //筛选
				let ids = filteredItems.map(item => item.id) //添加id
				this.cn.confirm('您确定要删除吗').then(res => {
					if (res.confirm) {
						this.rq.getData('Memorder/del_cart', {
							ids: ids.join(',')
						}).then(res => {
							if (res.code == 1) {
								this.listCartProduct()
								//重新加载底部栏
								this.loadBottom()
							}
						})
					}
				})
			},
			confirm(e) {
				if (!this.chooseNumber) {
					this.cn.toast('请选择商品');
					return false
				}
				let filteredItems = this.effectiveProductList.filter(item => item.is_select == 1); //筛选
				let ids = filteredItems.map(item => item.id) //添加id
				uni.navigateTo({
					url: '/pages/shop/order?ids='+ids
				})
			},
		},

	}
</script>

<style>
	.home {
		width: 100%;
		min-height: 100vh;
		background: #FEFEFE;
		padding: 40rpx 30rpx 210rpx;
	}

	.delimg {
		width: 28.85rpx;
		height: 28.85rpx;
	}

	.footbg {
		width: 100%;
		height: 182rpx;
		background: #FFFFFF;
		box-shadow: -8rpx 0rpx 80rpx 0rpx rgba(176, 181, 185, 0.25);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99;
	}
</style>